<template>
  <div>
    <MyHeader :background="'blue'" title="TabBar案例"></MyHeader>
    <div class="main">
      <keep-alive>
      <component :is="MyComponents"></component>
      </keep-alive>
    </div>
    <MyTabBar @changeComponent='change' :list='tabList'></MyTabBar>
  </div>
</template>

<script>
import MyHeader from "./components/MyHeader";
import MyTabBar from "./components/MyTabBar.vue";
import MyGoodsList from "./views/MyGoodsList.vue";
import MyGoodsSearch from "./views/MyGoodsSearch.vue";
import MyUserInfo from "./views/MyUserInfo.vue";
import axios from "axios";
export default {
  components: {
    MyTabBar,
    MyHeader,
    MyGoodsList,
    MyGoodsSearch,
    MyUserInfo,
  },
  data() {
    return {
      tabList: [],
      MyComponents:'MyGoodsList'
    };
  },
  created() {
    console.log(this.$http);
    axios.get("/list.json").then((res) => this.tabList = res.data );
  },
  methods:{
    change(uname){
     this.MyComponents = uname
    }
  }
};
</script>

<style scoped>
.main {
  padding-top: 45px;
  padding-bottom: 51px;
}
</style>
